<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>转账汇款</title>
    <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
    <style type="text/css">
    	body {
    		margin: 0;
    		background-color: #fbfbfb;
    		text-align: center;
    	}

    	.lowin.lowin-red {
		    --color-primary: #ff6464;
		    --color-grey: rgba(255, 100, 100, .06);
		    --color-dark: rgba(255, 100, 100, .8);
		    --color-semidark: rgba(255, 100, 100, .55);
		}

    	.lowin {
    		--color-primary: #44a0b3;
    		--color-grey: rgba(68, 160, 179, .06);
    		--color-dark: rgba(68, 160, 179, .7);
    		--color-semidark: rgba(68, 160, 179, .5);
    		text-align: center;
    		top:0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		margin: auto;
    		font-family: 'Segoe UI';
    		font-size: 14px;
    		width: 400px;
    		height: 800px;
    		position: absolute;
    	}

    	.lowin * {
		    -webkit-box-sizing: border-box;
		    box-sizing: border-box;
		}

    	.lowin .lowin-brand {
    		width: 100px;
		    height: 100px;
		    margin: 0 auto -50px auto;
		    border-radius: 50%;
		    box-shadow: 0 4px 40px rgba(0, 0, 0, .07);
		    -webkit-box-shadow: 0 4px 40px rgba(0, 0, 0, .07);
		    padding: 10px;
		    background-color: #fff;
		    z-index: 1;
		    position: relative;
            overflow: hidden;
    	}

    	.lowin .lowin-brand img {
		    width: 100%;
		}

		.lowin .lowin-wrapper {
			-webkit-transition: all 1s;
		    -o-transition: all 1s;
		    transition: all 1s;
		    perspective: 1000px;
		    position: relative;
		    height: 100%;
		    width: 390px;
		    margin: 0 auto;
		    min-height: 456px;
		}

        .lowin .lowin-box {
            width: 100%;
            position: absolute;
            left: 0;
        }

        .lowin .lowin-box-inner {
		    background-color: #fff;
		    -webkit-box-shadow: 0 7px 25px rgba(0, 0, 0, .08);
		    box-shadow: 0 7px 25px rgba(0, 0, 0, .08);
		    padding: 60px 25px 25px 25px;
		    text-align: left;
		    border-radius: 3px;
		}

		form {
		    display: block;
		    margin-top: 0em;
		}

		.lowin .lowin-box p {
		    color: var(--color-semidark);
		    font-weight: 700;
		    margin-bottom: 20px;
		    text-align: center;
		}

		.lowin .lowin-box .lowin-group {
		    margin-bottom: 30px;
		}

		.lowin .lowin-box label {
		    margin-bottom: 5px;
		    display: inline-block;
		    width: 100%;
		    color: var(--color-semidark);
		    font-weight: 700;
		}

		.lowin .lowin-box .lowin-input {
		    background-color: var(--color-grey);
		    color: var(--color-dark);
		    border: none;
		    border-radius: 3px;
		    padding: 15px 20px;
		    width: 100%;
		    outline: 0;
		}

		.lowin .lowin-box .lowin-btn {
		    display: inline-block;
		    width: 100%;
		    border: none;
		    color: #fff;
		    padding: 15px;
		    border-radius: 3px;
		    background-color: var(--color-primary);
		    -webkit-box-shadow: 0 2px 7px var(--color-semidark);
		    box-shadow: 0 2px 7px var(--color-semidark);
		    font-weight: 700;
		    outline: 0;
		    cursor: pointer;
		    -webkit-transition: all .5s;
		    -o-transition: all .5s;
		    transition: all .5s;
		}

		.lowin .text-foot {
		    text-align: center;
		    padding: 10px;
		    font-weight: 700;
		    margin-top: 20px;
		    color: var(--color-semidark);
		}

		.lowin .lowin-blue {
			--color-primary: #0081C6;
			--color-grey: rgba(0, 129, 198, .05);
			--color-dark: rgba(0, 129, 198, .7);
			--color-semidark: rgba(0, 129, 198, .45);
		}

		.lowin .lowin-red {
			--color-primary: #ff6464;
			--color-grey: rgba(255, 100, 100, .06);
			--color-dark: rgba(255, 100, 100, .8);
			--color-semidark: rgba(255, 100, 100, .55);
		}

		.lowin .lowin-purple {
			--color-primary: #6C567B;
			--color-grey: rgba(108, 86, 123, .08);
			--color-dark: rgba(108, 86, 123, .7);
			--color-semidark: rgba(108, 86, 123, .45);
		}

    </style>
</head>
<body>
    <div class="lowin" style="color: aqua">
    	<div class="lowin-brand">
			<img src="/img/kodinger.jpg" alt="logo">
		</div>
		<div class="lowin-wrapper">
            <div class="lowin-box lowin-login">
            	<div class="lowin-box-inner">
            		<form action="#login">
            			<p>转账汇款</p>
						<div class="lowin-group lowin-blue">
							<label>收款人：</label>
							<input type="text" id="toUser" value="韩梅梅" class="lowin-input lowin-blue" disabled></input>
						</div>
            			<div class="lowin-group lowin-blue">
							<label>收款账户：</label>
							<input type="text" id="toAccount" value="6029621011001" class="lowin-input lowin-blue" disabled></input>
						</div>
						<div class="lowin-group">
							<label>付款人：</label>
							<input type="text" id="fromUser" value="李大雷" class="lowin-input" disabled></input>
						</div>
						<div class="lowin-group">
							<label>付款账户：</label>
							<input type="text" id="fromAccount" value="6029621011000" class="lowin-input" disabled></input>
						</div>
						<div class="lowin-group lowin-purple">
							<label>转账金额：</label>
							<input type="text" id="money" onblur="checkFormat(this)" class="lowin-input lowin-purple"></input>
						</div>
						<button class="lowin-btn login-btn "	id="submitBtn">
							转账
						</button>
						<div class="text-foot lowin-red"></div>
            		</form>
            	</div>
            </div>
		</div>
	</div>
	<script type="text/javascript">
		$(function(){
            $("#submitBtn").bind("click",function(){
            	var fromAccount = $("#fromAccount").val();
                var toAccount = $("#toAccount").val();
                var money = $("#money").val();

                if(money == null || $.trim(money).length == 0){
                    //alert("sorry,必须输入转账金额~");
                    $(".text-foot").html("sorry,必须输入转账金额~");
                    return;
                }

                $.ajax({
                    url:'/transferServlet',
                    type:'POST',    //GET
                    async:false,    //或false,是否异步
                    data:{
                        fromCardNo:fromAccount,
                        toCardNo:toAccount,
                        money:money
                    },
                    timeout:5000,    //超时时间
                    dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text
                    success:function(data){
                        if("200" == data.status){
							$(".text-foot").html("转账成功~~~");
                        }else{
							$(".text-foot").html("转账失败~~~,message:" + data.message);
                        }
                    }
                });
            });
        });

        //检查输入值是否为整数
        function checkFormat(obj){
            var reg = /^[0-9]+[0-9]*]*$/;
            if($.trim($(obj).val()).length>0){
                if(!reg.test($(obj).val())){
                    //alert("输入格式错误！请输整数！");
                    $(".text-foot").html("输入格式错误！请输整数！");
                    $(obj).val("");
                }else{
                    $(obj).val(parseInt($(obj).val()));
                }
            }
        }

	</script>
</body>
</html>